<template>
	<view class="page detail">
		<view class="title-wrapper">
			<view class="tag">
				<uni-tag inverted text="置顶" type="error"></uni-tag>
			</view>
			<view class="title">
				{{detail.title}}
			</view>
		</view>
		<view class="info-wrapper">
			<view class="author">{{detail.author}}</view>
			<view class="item">
				<uni-dateformat :date="detail.publish_date" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
			</view>
			<view class="counts">
				阅读量:{{detail.view_count}}
			</view>
		</view>
		<view class="content-wrapper">
			<mp-html :content="detail.content"></mp-html>
		</view>
	</view>
</template>

<script setup>
	import {ref} from "vue";
	import {onLoad} from "@dcloudio/uni-app";
	import {GetNoticeDetail} from "../../api/index.js"
	const detail = ref({});
	
	onLoad(async ({id})=>{
		if(!id){
			return uni.showModal({
				content:"参数缺失",
				showCancel:false,
				success(res) {
					if(res.confirm){
						uni.reLaunch({
							url:"/pages/index/index"
						})
					}
				}
			})
		}
		uni.showLoading({
			title:"数据请求中..."
		});
		const res = await GetNoticeDetail({id});
		detail.value=res.data;
		uni.hideLoading();
	})
</script>

<style lang="scss" scoped>
	.title-wrapper{
		display: flex;
		margin-bottom: 30rpx;
		.tag{
			width: 100rpx;
		}
		.title{
			font-weight: bold;
			font-size:32rpx;
			width: calc(100% - 100rpx);
		}
	}
	.info-wrapper{
		display: flex;
		color:rgba(0,0,0,0.6);
		margin-bottom: 20rpx;
		font-size:26rpx;
		align-items: center;
		.author{
			margin-right: 12rpx;
			font-weight: bold;
		}
		.counts{
			margin-left: auto;
		}
	}
</style>